<template>
  <div class="container-page-order-detail">

    <itemSlotCard class="item-card-border" :show-title="false" min-height="50">
      <div class="item-order-state"> {{ orderInfo.display_state | display_state(orderInfo.refund_at) }}</div>
    </itemSlotCard>

    <itemSlotCard v-if="orderInfo.pay_limit>0" :show-title="false">
      <div v-if="mivaTime>0" class="item-miva-time">剩余时间: {{ mivaTime | parseTime('{h}:{i}:{s}') }}</div>
      <div v-else class="item-miva-time">订单已被取消</div>
    </itemSlotCard>

    <itemSlotCard title="收货信息" icon="地址" min-height="130">
      <itemInfoAddress :value="orderInfo.address" />
    </itemSlotCard>

    <itemSlotCard title="订单信息" icon="订单" min-height="255">
      <itemListProduct v-for="(temp_info, index_info) in orderInfo.goods_info" :key="index_info" :value="temp_info" />
      <itemInfoOrder :value="orderPriceInfo" />
    </itemSlotCard>

    <itemSlotCard v-if="orderInfo.remark" icon="订单" title="买家留言">
      <div class="item-remark">{{ orderInfo.remark }}</div>
    </itemSlotCard>

    <itemSlotCard class="item-card-kefu" :show-title="false" min-height="40">
      <div @click="show = true">
        <img class="item-icon-kefu" src="@/assets/serve-icon.png">客户服务
      </div>
    </itemSlotCard>

    <itemSlotCard :show-title="false">
      <itemInfoOrderPlus :value="orderInfo" />
      <div class="group-btn">
        <!-- <div v-if="orderInfo.display_state == 2 " class="item-btn item-btn-normal" @click="cleanHandler">取消订单</div>
        <itemBtnPay v-if="orderInfo.display_state == 2 " :order-info="orderInfo" label="付款" />
        <div v-if="comShowBtnRefund" class="item-btn item-btn-disabed" @click="tuikuanHanlder">申请退款</div>
        <div v-if="comShowBtnCancelRefund" class="item-btn item-btn-active" @click="quxiaioshenqingHanlder">取消申请</div>
        <div v-if="comShowBtnReBuy" class="item-btn item-btn-active" @click="reBuyHanlder">再次购买</div> -->
        <div v-if="orderInfo.user_status == 3" class="item-btn item-btn-disabed" @click="tuikuanHanlder">申请退款</div>
        <div v-if="orderInfo.user_status == 4" class="item-btn item-btn-active" @click="quxiaioshenqingHanlder">取消申请</div>
        <div v-if="orderInfo.user_status == 1" class="item-btn item-btn-active" @click="reBuyHanlder">再次购买</div>
        <div v-if="orderInfo.display_state == 2 " class="item-btn item-btn-normal" @click="cleanHandler">取消订单</div>
        <itemBtnPay v-if="orderInfo.display_state == 2 " :order-info="orderInfo" label="付款" />
      </div>
    </itemSlotCard>

    <!-- 客服弹窗 -->
    <div v-show="show" class="item-alert" @click="show = false">
      <div class="cont-tk">
        <div class="title"><img :src="$service_png"></div>
        <img src="@/assets/close.png" class="close">
      </div>
    </div>

  </div>
</template>

<script>
// api
import { userOrderDetails, userOrderOperate, pay } from '@/api/miva'
// item
import itemSlotCard from '@/components/miva-item/item-slot-card'
import itemListProduct from '@/views/allOrder/components/item-list-product'
import itemInfoOrder from '@/components/miva-item/item-info-order'
import itemInfoAddress from '@/components/miva-item/item-info-address'
import itemInfoOrderPlus from '@/components/miva-item/item-info-order-plus'
import itemBtnPay from '@/components/miva-item/item-btn-pay'
// vant
import { Dialog } from 'vant'
export default {
  components: {
    itemSlotCard,
    itemListProduct,
    itemInfoOrder,
    itemInfoOrderPlus,
    itemInfoAddress,
    itemBtnPay
  },
  filters: {
    display_state(state, refund_at) {
      const obj = {
        1: '订单已取消',
        2: '订单待付款',
        3: '待发货状态',
        4: '商家已发货',
        5: '商品已签收, 交易完成',
        6: refund_at === '' ? '退款申请已提交,等待审核' : '退款已完成'
      }
      return obj[state]
    }
  },
  data() {
    return {
      show: false,
      id: null,
      orderInfo: {},
      mivaTime: ''
    }
  },
  computed: {
    // 计算退款按钮显示时机
    comShowBtnRefund() {
      const waitSend = Number(this.orderInfo.display_state) === 3
      const waitGet = Number(this.orderInfo.display_state) === 4
      const noRefund = this.orderInfo.refund_at !== ''
      return (waitSend || waitGet) && noRefund
    },
    // 计算取消退款按钮显示时机
    comShowBtnCancelRefund() {
      const { comShowBtnRefund } = this
      const isRefund = this.orderInfo.refund_at === ''
      return comShowBtnRefund && isRefund
    },
    // 计算再次购买按钮显示时机
    comShowBtnReBuy() {
      const { comShowBtnCancelRefund } = this
      const orderCancel = Number(this.orderInfo.display_state) === 1
      const orderComplete = Number(this.orderInfo.display_state) === 5
      const orderServic = Number(this.orderInfo.display_state) === 6
      const isServicState = orderServic && !comShowBtnCancelRefund
      return orderCancel || orderComplete || isServicState
    },
    // 计算订单价格数据
    orderPriceInfo() {
      const obj = {
        goods_total: this.orderInfo.orders_total - this.orderInfo.freight,
        freight: this.orderInfo.freight
      }
      return obj
    },
    // 重组订单信息
    comOrderInfo() {
      const arr = []
      const { goods_info } = this.orderInfo
      for (const val of goods_info) {
        arr.push({
          thumb: val.img,
          product_name: val.product_name,
          specification_name: val.specification,
          specification_price: val.goods_price,
          num: val.goods_num,
          product_id: val.goods_id,
          specification_id: val.options_id
        })
      }
      return arr
    }
  },
  async mounted() {
    if (!(await this.getParams())) {
      return console.log('获取订单id失败')
    }
    // 获取订单详情
    await this.getOrderInfo()
    this.mivaTime = this.orderInfo.pay_limit * 1000 - Date.now()
    setInterval(() => {
      this.mivaTime = this.orderInfo.pay_limit * 1000 - Date.now()
    }, 1000)
  },
  methods: {
    async reBuyHanlder() {
      console.log('再次购买按钮-log')
      console.log(this.comOrderInfo)
      // 把订单信息存入vuex
      await this.$store.dispatch('miva/saveOredr', {
        ...this.orderInfo,
        goods_info: this.comOrderInfo,
        goods_total: this.orderInfo.orders_total - this.orderInfo.freight
      })
      // 跳转到提交订单页面
      this.$router.push({ name: 'submitOrder' })
    },
    async quxiaioshenqingHanlder() {
      console.log('取消申请按钮-log')
      await this.putOrderState({ type: 3 })
    },
    async tuikuanHanlder() {
      console.log('退款按钮-log')
      await this.putOrderState({ type: 2 })
    },
    async cleanHandler() {
      console.log('取消订单按钮-log')
      Dialog.confirm({
        title: '取消订单',
        message: '确认取消订单嘛?'
      })
        .then(async() => {
          // on confirm
          await this.putOrderState({ type: 1 })
        })
        .catch(() => {
          // on cancel
          console.log('放弃取消订单')
        })
    },
    async payHandler() {
      console.log('支付按钮-log')
      // console.trace()
      const data = {
        orders_num: this.orderInfo.orders_num,
        pay_money: this.orderInfo.orders_total
      }
      console.log(data)
      const res = await pay(data)
      console.log(res)
    },
    // 修改订单状态 type：1：取消订单，2：申请退款，3：取消申请退款
    async putOrderState({ type = 1 } = {}) {
      const { id } = this
      await userOrderOperate({ type, id })
      // 重新获取订单详情
      await this.getOrderInfo()
    },
    // 获取订单详情
    async getOrderInfo() {
      const { data } = await userOrderDetails({ id: this.id })
      this.orderInfo = data
    },
    // 获取params
    async getParams() {
      console.log(this.$route.params)
      const { id = false } = this.$route.params
      if (!id) {
        this.$router.back()
        return false
      }
      this.id = id
      return true
    }
  }
}
</script>

<style lang="less">
.container-page-order-detail {
  width: 100%;
  padding: 10px;
  background: #f5f6f8;
  box-sizing: border-box;
  .group-btn {
    padding: 10px 0;
    display: flex;
    justify-content: flex-end;
  }
  .item {
    &-remark {
      font-size: 14px;
      color: #666;
    }
    &-miva-time {
      font-size: 14px;
      color: #666;
    }
    &-order-state {
      padding: 5px;
      font-size: 14px;
      color: #d63a54;
      &::before {
        content: "订单状态 : ";
        color: #333;
      }
    }
    &-card-border {
      border: 1px solid #d63a54;
    }
    &-card-kefu {
      font-size: 14px;
      text-align: center;
    }
    &-icon-kefu {
      margin-right: 10px;
      vertical-align: bottom;
    }
    &-btn {
      width: 60px;
      margin-left: 10px;
      padding: 5px;
      border: 1px solid;
      text-align: center;
      font-size: 12px;
      border-radius: 3px;
      background-color: #fff;
    }
  }
  .item-alert {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
    .cont-tk {
      position: absolute;
      width: 80%;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      img {
        width: 100%;
      }
      .close {
        width: 10%;
        top: 80vw;
        left: 46%;
        position: absolute;
      }
      .title {
        padding: 50px 40px;
        font-weight: bold;
        text-align: center;
      }
    }
  }
}
</style>
